import { Fragment } from 'react';
import { history } from 'umi';
import { Button } from 'antd';
import PropTypes from 'prop-types';
import './index.less';

const Layout = props => {
  const { children } = props;
  const { routes } = props.routes[0];
  const { length } = routes;
  const nodes = routes.map((item, index) => {
    const { path } = item;
    const style = index === length - 1
      ? {
        marginBottom: '10px'
      }
      : {
        marginRight: '10px',
        marginBottom: '10px'
      };

    return (
      <Button
        key={index}
        style={style}
        type="primary"
        onClick={
          () => {
            history.push(path);
          }
        }
      >{path}</Button>
    );
  });

  return (
    <Fragment>
      <div className="nav-container">{nodes}</div>
      <div className="content-container">{children}</div>
    </Fragment>
  );
};

Layout.propTypes = {
  children: PropTypes.object.isRequired,
  routes: PropTypes.array.isRequired
};

export default Layout;